<template>
  <div class="travel-plans-container">
    <!-- 顶部搜索和筛选区域 -->
    <div class="controls-section">
      <div class="search-bar">
        <input
            v-model="searchQuery"
            type="text"
            placeholder="搜索目的地或关键词..."
            class="search-input"
        >
        <button class="search-button">
          <i class="fas fa-search"></i>
        </button>
      </div>

      <div class="filters">
        <div class="filter-group">
          <label>行程天数：</label>
          <select v-model="selectedDays">
            <option value="all">全部</option>
            <option>1-3天</option>
            <option>4-7天</option>
            <option>7天+</option>
          </select>
        </div>

        <div class="filter-group">
          <label>价格范围：</label>
          <select v-model="selectedPrice">
            <option value="all">全部</option>
            <option>￥0-1000</option>
            <option>￥1000-3000</option>
            <option>￥3000+</option>
          </select>
        </div>

        <div class="sort-group">
          <button
              v-for="sort in sortOptions"
              :key="sort.value"
              :class="{ active: selectedSort === sort.value }"
              @click="selectedSort = sort.value"
          >
            {{ sort.label }}
          </button>
        </div>
      </div>
    </div>

    <!-- 行程卡片展示区 -->
    <div class="plans-grid">
      <transition-group name="card-list">
        <div
            v-for="plan in filteredPlans"
            :key="plan.id"
            class="plan-card"
            @click="viewDetail(plan)"
        >
          <div class="card-image">
            <img :src="plan.coverImage" :alt="plan.destination">
            <div class="duration-badge">{{ plan.duration }}</div>
          </div>

          <div class="card-content">
            <h3 class="destination">{{ plan.destination }}</h3>
            <div class="highlights">
              <span v-for="(tag, index) in plan.tags" :key="index" class="tag">
                {{ tag }}
              </span>
            </div>

            <div class="stats">
              <div class="stat-item">
                <i class="fas fa-coins"></i>
                <span>{{ plan.costSummary.total }}</span>
              </div>
              <div class="stat-item">
                <i class="fas fa-map-marked-alt"></i>
                <span>{{ plan.cityRoutes.cities.length }}个城市</span>
              </div>
            </div>

            <div class="action-bar">
              <button class="save-button">
                <i class="far fa-bookmark"></i>
              </button>
              <button class="detail-button">查看详情</button>
            </div>
          </div>
        </div>
      </transition-group>
    </div>
  </div>
</template>

<script>
import {ref,computed} from 'vue'
import router from "@/router";
export default {
  name:'TravelGuideView',
  setup() {
    const plans = ref([]) // 从API获取的行程数据
    const searchQuery = ref('')
    const selectedDays = ref('all')
    const selectedPrice = ref('all')
    const selectedSort = ref('default')

    const sortOptions = [
      { label: '推荐排序', value: 'default' },
      { label: '价格从低到高', value: 'price-asc' },
      { label: '价格从高到低', value: 'price-desc' },
      { label: '行程天数', value: 'duration' }
    ]

    const filteredPlans = computed(() => {
      return [...plans.value]
          .filter(plan => {
            const matchesSearch = plan.destination.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
                plan.tags.some(tag => tag.toLowerCase().includes(searchQuery.value.toLowerCase()))

            const matchesDays = selectedDays.value === 'all' ||
                (parseInt(plan.duration) <= 3 && selectedDays.value === '1-3天') ||
                (parseInt(plan.duration) > 3 && parseInt(plan.duration) <= 7 && selectedDays.value === '4-7天') ||
                (parseInt(plan.duration) > 7 && selectedDays.value === '7天+')

            const matchesPrice = selectedPrice.value === 'all' ||
                (parseInt(plan.costSummary.total) <= 1000 && selectedPrice.value === '￥0-1000') ||
                (parseInt(plan.costSummary.total) > 1000 && parseInt(plan.costSummary.total) <= 3000 && selectedPrice.value === '￥1000-3000') ||
                (parseInt(plan.costSummary.total) > 3000 && selectedPrice.value === '￥3000+')

            return matchesSearch && matchesDays && matchesPrice
          })
          .sort((a, b) => {
            switch(selectedSort.value) {
              case 'price-asc':
                return parsePrice(a.costSummary.total) - parsePrice(b.costSummary.total)
              case 'price-desc':
                return parsePrice(b.costSummary.total) - parsePrice(a.costSummary.total)
              case 'duration':
                return parseInt(a.duration) - parseInt(b.duration)
              default:
                return 0
            }
          })
    })

    function parsePrice(priceStr) {
      return parseInt(priceStr.replace(/[^0-9]/g, ''))
    }

    function viewDetail(plan) {
      // 路由跳转到详情页
      router.push(`/plans/${plan.id}`)
    }

    return {
      plans,
      searchQuery,
      selectedDays,
      selectedPrice,
      selectedSort,
      sortOptions,
      filteredPlans,
      viewDetail
    }
  }
}
</script>

<style scoped>
.travel-plans-container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 2rem;
}

.controls-section {
  margin-bottom: 2rem;
}

.search-bar {
  display: flex;
  margin-bottom: 1.5rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  border-radius: 50px;
  overflow: hidden;
}

.search-input {
  flex: 1;
  padding: 1rem 2rem;
  border: none;
  font-size: 1.1rem;
}

.search-button {
  padding: 1rem 2rem;
  background: #4CAF50;
  border: none;
  color: white;
  cursor: pointer;
  transition: background 0.3s;
}

.filters {
  display: flex;
  gap: 2rem;
  align-items: center;
}

.filter-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

select {
  padding: 0.5rem;
  border-radius: 8px;
  border: 1px solid #ddd;
}

.sort-group button {
  padding: 0.8rem 1.5rem;
  border: none;
  border-radius: 8px;
  background: #f5f5f5;
  cursor: pointer;
  transition: all 0.3s;
}

.sort-group button.active {
  background: #4CAF50;
  color: white;
}

.plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
}

.plan-card {
  background: white;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transition: transform 0.3s, box-shadow 0.3s;
  cursor: pointer;
}

.plan-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.15);
}

.card-image {
  position: relative;
  height: 200px;
}

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.duration-badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: rgba(0,0,0,0.7);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 20px;
}

.card-content {
  padding: 1.5rem;
}

.destination {
  margin: 0 0 1rem;
  color: #333;
  font-size: 1.4rem;
}

.highlights {
  margin-bottom: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tag {
  background: #f0f9ff;
  color: #2196F3;
  padding: 0.3rem 0.8rem;
  border-radius: 12px;
  font-size: 0.9rem;
}

.stats {
  display: flex;
  gap: 1.5rem;
  margin: 1rem 0;
  color: #666;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.action-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1rem;
}

.detail-button {
  background: #2196F3;
  color: white;
  padding: 0.8rem 1.5rem;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

.save-button {
  background: none;
  border: none;
  color: #666;
  font-size: 1.2rem;
  cursor: pointer;
}

/* 过渡动画 */
.card-list-enter-active,
.card-list-leave-active {
  transition: all 0.5s ease;
}
.card-list-enter-from,
.card-list-leave-to {
  opacity: 0;
  transform: translateY(30px);
}
</style>